<extend name="public/form"/>
<block name="css"></block>
<block name="content">
    <div class="layui-card-header ">
        <span class="layui-breadcrumb">
          <a href="/admin" target="_blank">首页</a>
          <a href="javascript:;">采集管理</a>
          <a href="javascript:;" onclick="parent.xadmin.add_tab('采集规则管理','{:url('index')}')">采集规则管理</a>
          <a><cite>编辑采集规则</cite></a>
        </span>
        <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh-3" style="line-height:30px"></i></a>
    </div>
    <div class="layui-card-body layui-tab"><!--选项卡父容器必须包含layui-tab class-->
        <ul class="layui-tab-title">
            <li class="layui-this">简单采集</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form id="form1" class="layui-form">
                    <input type="hidden" name="type" value="1">
                    <div class="layui-form-item">
                        <label class="layui-form-label">采集规则名</label>
                        <div class="layui-input-block">
                            <input type="text" value="{$collect_rule->name}" name="name" lay-verify="required" lay-reqtext="请输入采集规则名"
                                   placeholder="请输入采集规则名"
                                   autocomplete="off" class="layui-input ">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">采集链接</label>
                        <div class="layui-input-block">
                            <input type="text" value="{$collect_rule->url}" name="url" lay-verify="required|url" lay-reqtext="请输入采集规则名"
                                   placeholder="请输入采集链接全地址"
                                   autocomplete="off" class="layui-input ">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">规则
                            <button type="button" class="layui-btn layui-btn-xs add_row">增加一行</button>
                        </label>
                        <div class="layui-input-block">
                            <table id="table1" lay-filter="table_filter1"></table>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">移除元素</label>
                        <div class="layui-input-block">
                            <input type="text" value="{$collect_rule->remove}" name="remove" placeholder="请输入移除元素选择器,不填不处理"
                                   autocomplete="off" class="layui-input ">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">处理乱码</label>
                        <div class="layui-input-block">
                            <input type="text" value="{$collect_rule->encoding}" name="encoding" placeholder="若网页非utf8请输入编码入gbk"
                                   autocomplete="off" class="layui-input ">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-inline">
                            <input type="text" value="{$collect_rule->sorts}" name="sorts" lay-verify="number|required"
                                   lay-reqtext="排序必须为数字"
                                   placeholder="排序" autocomplete="off" class="layui-input ">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" lay-submit="" lay-filter="submit_table1">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            <button type="button" class="layui-btn layui-btn-normal" lay-submit=""
                                    lay-filter="submit_test1">测试采集
                            </button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
        <script type="text/html" id="toolbar1">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                    class="layui-icon layui-icon-delete"></i>删除本行</a>
            <a class="layui-btn layui-btn-xs" lay-event="add"><i
                    class="layui-icon layui-icon-add-1"></i>增加一行</a>
        </script>
        <script type="text/html" id="headbar1">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-xs" lay-event="add">增加一行</button>
            </div>
        </script>
    </div>
</block>
<block name="js">
    <script>
        layui.use(['jquery', 'form', 'layer', 'element', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table,
                layer = layui.layer;
            layui.element.render();
            let rules={$collect_rule->rules|raw};
            //执行渲染
            var demo_row = {"key": "","selector": "", "attr": ""}
            table.render({
                elem: '#table1' //指定原始表格元素选择器（推荐id选择器）
                , data: rules
                , toolbar: false
                , defaultToolbar: []
                , cols: [[
                    {field: 'key', title: '采集结果key', edit: 'text'}
                    , {field: 'selector', title: '选择器', edit: 'text'}
                    , {field: 'attr', title: '属性', edit: 'text'}
                    , {title: '操作', align: 'center', toolbar: '#toolbar1'}
                ]]
            });
            //监听工具条
            table.on('tool(table_filter1)', function (obj) {
                var data = obj.data;
                console.log(data);
                switch (obj.event) {
                    case 'del':
                        layer.confirm('确定要删除该行吗？', function (index) {
                            obj.del();
                            layer.close(index);
                        });
                        break;
                    case 'add':
                        add_row();
                        break;
                }
            });
            table.on('toolbar(table_filter1)', function (obj) {
                switch (obj.event) {
                    case 'add':
                        add_row("table1");
                        break;
                }
            });

            function get_table_data(table_id) {
                let data_new = table.cache[table_id];
                let data_current=[];
                data_new.forEach(function (currentValue, index) {
                    delete currentValue.LAY_TABLE_INDEX;
                    if(currentValue.key!=undefined){
                        data_current.push(currentValue);
                        demo_row=currentValue;
                    }
                })
                return data_current;
            }

            function add_row($table) {
                let data_new = get_table_data($table);
                data_new.push(demo_row);
                table.reload($table, {data: data_new});
            }

            $(".add_row").click(function () {
                add_row("table1");
            })

            form.on('submit(submit_table1)', function (data) {
                let send_json = data.field;
                send_json.rules = get_table_data("table1");
                $.ajax({
                    url:'/admin/collect_rule/edit_type1?id={$collect_rule->id}',
                    method:'post',
                    data:send_json,
                    success:function(res){
                        if (res.code == 0) {
                            layer.alert("编辑成功", {
                                icon: 6
                            }, function () {
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.location.reload();
                                //关闭当前frame
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(res.msg, {icon: 5});
                        }
                    },
                    error:function (data) {
                        layer.msg('服务器繁忙', {icon: 5});
                    }
                });
                return false;
            });

            form.on('submit(submit_test1)', function (data) {
                let send_json = data.field;
                send_json.rules = get_table_data("table1");
                console.log(send_json);
                xadmin.open('采集预览', "/admin/collect_rule/preview?data=" + encodeURIComponent(JSON.stringify(send_json)));
                return false;
            });

        })
    </script>
</block>